<template>
  <div>
    <el-row id="order_total">
      <el-col style="display:flex">
        <div
          class="order_content"
          :span="8"
          v-for="(item, index) in items"
          :key="index"
          @click="mouseEnter(index)"
          :class="{ active: index == isActive }"
        >
          <div
            class="order_total_title"
            style="height:120px;line-height:120px;"
          >
            {{ item }}
          </div>
        </div>
      </el-col>
    </el-row>
    <div v-if="paiming">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        @keyup.enter.native="search()"
      >
        <!-- <el-row :span="24">
                    <el-col :span="8"> -->
        <el-form-item label="大区名称">
          <br />
          <br />
          <el-input
            v-model="formInline.upOrgZone"
            placeholder
            style="margin-left:-60px;width:200px"
            clearable
          ></el-input>
        </el-form-item>
        <!-- </el-col>
                    <el-col :span="8"> -->
        <el-form-item
          style="margin-left:700px;text-align:right;margin-top:30px"
        >
          <el-button
            type="primary"
            @click="kong()"
            size="mini"
            icon="el-icon-delete"
            >清空</el-button
          >
          <!-- </el-form-item>
                        <el-form-item> -->
          <el-button
            type="primary"
            @click="search()"
            size="mini"
            icon="el-icon-search"
            >查询</el-button
          >
          <!-- </el-form-item>
                        <el-form-item> -->
          <el-button
            type="success"
            @click="exportExcel()"
            size="mini"
            icon="el-icon-s-data"
            >导出</el-button
          >
        </el-form-item>
        <!-- </el-col>
                </el-row> -->
      </el-form>
      <div>
        <el-table
          :data="tableData"
          border
          row-key="id"
          height="400px"
          style="width: 100%;"
          align="left"
          id="colone"
          @sort-change="handleSort"
        >
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="60"
          ></el-table-column>
          <el-table-column
            v-for="(item, index) in colone"
            :key="`colone${index}`"
            :min-width="200"
            :prop="dropColone[index].prop"
            :width="dropColone[index].width"
            :label="item.label"
            :sortable="item.sortable"
          ></el-table-column>
        </el-table>

        <div class="block" style="margin-top:10px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 30, 50, 100, 150, 200]"
            :current-page="listQuery.current"
            :page-size="listQuery.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </div>

    <div v-if="paimingone">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <!-- <el-row :span="24">
                    <el-col :span="8"> -->
        <el-form-item label="营销区域名称">
          <br />
          <br />
          <el-input
            v-model="formInline.baseName"
            placeholder
            style="margin-left:-60px;width:200px"
            clearable
          ></el-input>
        </el-form-item>
        <!-- </el-col>
                    <el-col :span="8"> -->
        <el-form-item label="大区名称">
          <br />
          <br />
          <el-input
            v-model="formInline.upOrgZone"
            placeholder
            style="margin-left:-60px;width:200px"
            clearable
          ></el-input>
        </el-form-item>
        <!-- </el-col>
                    <el-col :span="8"> -->
        <el-form-item style="margin-left:700px;text-align:right;">
          <el-button
            type="primary"
            @click="kongone()"
            size="mini"
            icon="el-icon-delete"
            >清空</el-button
          >
          <!-- </el-form-item>
                        <el-form-item> -->
          <el-button
            type="primary"
            @click="searchone()"
            size="mini"
            icon="el-icon-search"
            >查询</el-button
          >
          <!-- </el-form-item>
                        <el-form-item> -->
          <el-button
            type="success"
            @click="exportExcelone()"
            size="mini"
            icon="el-icon-s-data"
            >导出</el-button
          >
        </el-form-item>
        <!-- </el-col>
                </el-row> -->
      </el-form>
      <div>
        <el-table
          :data="tableData"
          border
          row-key="id"
          align="left"
          height="400px"
          style="width: 100%;"
          id="coltwo"
          @sort-change="handleSort"
        >
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="60"
          ></el-table-column>
          <el-table-column
            v-for="(item, index) in coltwo"
            :min-width="200"
            :key="`coltwo${index}`"
            :prop="dropColtwo[index].prop"
            :width="dropColtwo[index].width"
            :label="item.label"
            :sortable="item.sortable"
          ></el-table-column>
        </el-table>

        <div class="block" style="margin-top:10px">
          <el-pagination
            @size-change="handleSizeChangeone"
            @current-change="handleCurrentChangeone"
            :page-sizes="[10, 20, 30, 50, 100, 150, 200]"
            :current-page="listQueryone.current"
            :page-size="listQueryone.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </div>

    <div v-if="paimingtwo">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <!-- <el-row :span="24">
                    <el-col :span="6"> -->
        <el-form-item label="店铺授权编码">
          <br />
          <br />
          <el-input
            v-model="formInline.authCode"
            placeholder
            style="margin-left:-80px;width:200px"
            clearable
          ></el-input>
        </el-form-item>
        <!-- </el-col>
                    <el-col :span="6"> -->
        <el-form-item label="店铺名称">
          <br />
          <br />
          <el-input
            v-model="formInline.storeName"
            placeholder
            style="margin-left:-60px;width:200px"
            clearable
          ></el-input>
        </el-form-item>
        <!-- </el-col>
                    <el-col :span="6"> -->
        <el-form-item label="大区名称">
          <br />
          <br />
          <el-input
            v-model="formInline.upOrgZone"
            placeholder
            style="margin-left:-60px;width:200px"
            clearable
          ></el-input>
        </el-form-item>
        <!-- </el-col>
                    <el-col :span="6"> -->
        <el-form-item label="营销区域名称">
          <br />
          <br />
          <el-input
            v-model="formInline.baseName"
            placeholder
            style="margin-left:-60px;width:200px"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="　　活跃度">
          <br />
          <br />
          <el-select
            v-model="formInline.activation"
            placeholder="请选择"
            clearable
            style="margin-left:-60px;width:200px"
          >
            <el-option
              v-for="(item, i) in orderStatusList"
              :key="i"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- </el-col>
                    <el-col :span="8"> -->
        <el-form-item label="是否下载最新活动名片">
          <br />
          <br />
          <el-select
            v-model="formInline.newestActivityDownload"
            placeholder="请选择"
            clearable
            style="margin-left:-130px;width:200px"
          >
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
        <!-- </el-col>
                    <el-col :span="8"> -->
        <el-form-item label="店铺人员信息是否完整">
          <br />
          <br />
          <el-select
            v-model="formInline.isInfoComplete"
            placeholder="请选择"
            clearable
            style="margin-left:-130px;width:200px"
          >
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
        <!-- </el-col>
                    <el-col :span="8"> -->
        <el-form-item label="第八代库存数量(瓶)">
          <br />
          <br />
          <el-input
            style="margin-left:-120px;width:200px"
            v-model="formInline.startStockCount"
            placeholder
          ></el-input
          >至
          <el-input
            style="width:200px;"
            v-model="formInline.endStockCount"
            placeholder
          ></el-input>
        </el-form-item>
        <br />
        <!-- </el-col>
                    
                    <el-col :span="8"> -->
        <el-form-item label="第八代销售数量（瓶）">
          <br />
          <br />
          <el-input
            style="margin-left:-130px;width:200px"
            v-model="formInline.startSellCount"
            placeholder
          ></el-input
          >至
          <el-input
            style="width:200px;"
            v-model="formInline.endSellCount"
            placeholder
          ></el-input>
        </el-form-item>
        <!-- </el-col>
                    <el-col :span="8"> -->
        <el-form-item label="下载活动名片次数（次）">
          <br />
          <br />
          <el-input
            style="margin-left:-130px;width:200px"
            v-model="formInline.startActivityCardDownloadCount"
            placeholder
          ></el-input
          >至
          <el-input
            style="width:200px;"
            v-model="formInline.endActivityCardDownloadCount"
            placeholder
          ></el-input>
        </el-form-item>
        <!-- </el-col>
                    <el-col :span="8"> -->

        <!-- </el-col>

                    <el-col :span="8"> -->
        <el-form-item
          style="margin-left:700px;text-align:right;margin-top:30px"
        >
          <el-button
            type="primary"
            @click="kongtwo()"
            size="mini"
            icon="el-icon-delete"
            >清空</el-button
          >
          <!-- </el-form-item>
                        <el-form-item> -->
          <el-button
            type="primary"
            @click="searchtwo()"
            size="mini"
            icon="el-icon-search"
            >查询</el-button
          >
          <!-- </el-form-item>
                        <el-form-item> -->
          <el-button
            type="success"
            @click="exportExceltwo()"
            size="mini"
            icon="el-icon-s-data"
            >导出</el-button
          >
          <el-button
            type="primary"
            @click="showConfigTableDialog()"
            size="mini"
            icon="el-icon-setting"
            :loading="insertLoading"
            >列表配置</el-button
          >
        </el-form-item>
        <!-- </el-col>
                </el-row> -->
      </el-form>
      <div>
        <el-table
          :data="tableData"
          border
          row-key="id"
          height="400px"
          style="width: 100%;"
          align="left"
          @sort-change="handleSort"
        >
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="60"
          ></el-table-column>
          <el-table-column
            v-for="(item, index) in col"
            :key="`col_${index}`"
            :min-width="200"
            :prop="dropCol[index].prop"
            :width="dropCol[index].width"
            :label="item.label"
            :sortable="item.sortable"
          >
            <template slot-scope="scope">
              <div v-if="dropCol[index].prop === 'activation'">
                <div v-if="scope.row.activation != null">
                  <span v-if="scope.row.activation == 1">低</span>
                  <span v-if="scope.row.activation == 2">中</span>
                  <span v-if="scope.row.activation == 3">高</span>
                </div>
              </div>
              <div v-if="dropCol[index].prop === 'newestActivityDownload'">
                <div v-if="scope.row.newestActivityDownload != null">
                  {{ scope.row.newestActivityDownload === 1 ? '是' : '否' }}
                </div>
              </div>
              <div v-if="dropCol[index].prop === 'isInfoComplete'">
                <div v-if="scope.row.isInfoComplete != null">
                  {{ scope.row.isInfoComplete === 1 ? '是' : '否' }}
                </div>
              </div>
              <span
                v-if="
                  dropCol[index].prop !== 'activation' &&
                    dropCol[index].prop != 'newestActivityDownload' &&
                    dropCol[index].prop != 'isInfoComplete'
                "
                >{{ scope.row[dropCol[index].prop] }}</span
              >
            </template>
          </el-table-column>
        </el-table>

        <div class="block" style="margin-top:10px">
          <el-pagination
            @size-change="handleSizeChangetwo"
            @current-change="handleCurrentChangetwo"
            :page-sizes="[10, 20, 30, 50, 100, 150, 200]"
            :current-page="listQuerytwo.current"
            :page-size="listQuerytwo.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </div>

    <!--列表配置-->
    <el-dialog
      title="列表配置"
      :visible.sync="configTableDialogVisible"
      width="50%"
      @close="closeConfigTableDialog()"
    >
      <div id="configTableDiv">
        <el-form :inline="true" :model="formInline2" class="demo-form-inline">
          <el-form-item label="选择列表字段：">
            <el-checkbox
              :indeterminate="formInline2.isIndeterminate"
              v-model="formInline2.isAll"
              style="margin-top:10px;"
              @change="isAllFieldChange"
              >全选</el-checkbox
            >
          </el-form-item>
          <el-divider></el-divider>
          <el-checkbox-group
            v-model="userMenuShowFields"
            @change="isSingleFieldChange"
          >
            <el-checkbox
              v-for="item in userMenuFieldList"
              :label="item.fieldCode"
              :key="item.fieldCode"
              style="margin:15px 10px;width:160px;"
              >{{ item.fieldName }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form>
        <el-row>
          <el-col :span="24" style="text-align: center;margin-top: 30px">
            <el-button type="info" @click="closeConfigTableDialog()" size="mini"
              >取 消</el-button
            >
            <el-button
              type="primary"
              @click="insertUserFieldRelation()"
              size="mini"
              >确 认</el-button
            >
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Sortable from 'sortablejs';
import { getmemberrule, getMemberExcel } from '@/api/membergrade';
import {
  memberManage,
  updatememberinfo,
  delmemberinfo,
  queryStoreOrgseq,
  getGraCount,
  queryMemberDetail,
} from '@/api/memberinfo';
import {
  queryTradeOrderTotalone,
  queryTradeOrderByParamone,
  queryTradeOrderByParamNoPage,
  excelTradeOrderByParamone,
  queryTradeOrderPayInfo,
  queryTradeOrderItemList,
  queryUserMenuFieldByParam,
  insertUserFieldRelation,
} from '@/api/tradeOrderSearch';
import {
  getWarZoneCount,
  getBase,
  getStore,
  exportWarZoneDate,
  exportBase,
  exportStore,
} from '@/api/businessActivity';
import qs from 'qs';

const curDateStr = function() {
  var curDate = new Date();
  var year = curDate.getFullYear();
  var month = curDate.getMonth() + 1;
  month = month > 9 ? month : '0' + month;
  var date = curDate.getDate(0);
  date = date > 9 ? date : '0' + date;
  return year + '-' + month + '-' + date;
};

export default {
  data() {
    return {
      insertLoading: false,
      configTableDialogVisible: false, //列表配置弹窗状态
      formInline2: {
        isIndeterminate: false, //是否半选中
        isAll: true, //是否全部显示,
        menuCode: 'merchantActivity',
      },
      userMenuFieldList: [], //全部列名列表
      userMenuAllFields: [], //全部的列名
      userMenuShowFields: [], //显示的列名
      userOldMenuShowFields: [], //原显示的列名
      colone: [
        {
          label: '大区名称',
          prop: 'upOrgZone',
        },
        {
          label: '活动名片下载次数',
          prop: 'activityCardDownloadCount',
          sortable: 'activity_card_download_count',
        },
        {
          label: '商品名片下载次数',
          prop: 'goodsCardDownloadCount',
          sortable: 'goods_card_download_count',
        },
        {
          label: '店铺名片下载次数',
          prop: 'storeCardDownloadCount',
          sortable: 'store_card_download_count',
        },
        {
          label: '总下载次数',
          prop: 'allCardDownloadCount',
          sortable: 'all_card_download_count',
        },
        {
          label: '高活跃商家数量',
          prop: 'activationHigh',
          sortable: 'activation_high',
        },
        {
          label: '中活跃商家数量',
          prop: 'activationSchool',
          sortable: 'activation_school',
        },
        {
          label: '低活跃商家数量',
          prop: 'activationLow',
          sortable: 'activation_low',
        },
      ],
      dropColone: [
        {
          label: '大区名称',
          prop: 'upOrgZone',
        },
        {
          label: '活动名片下载次数',
          prop: 'activityCardDownloadCount',
          sortable: 'activity_card_download_count',
        },
        {
          label: '商品名片下载次数',
          prop: 'goodsCardDownloadCount',
          sortable: 'goods_card_download_count',
        },
        {
          label: '店铺名片下载次数',
          prop: 'storeCardDownloadCount',
          sortable: 'store_card_download_count',
        },
        {
          label: '总下载次数',
          prop: 'allCardDownloadCount',
          sortable: 'all_card_download_count',
        },
        {
          label: '高活跃商家数量',
          prop: 'activationHigh',
          sortable: 'activation_high',
        },
        {
          label: '中活跃商家数量',
          prop: 'activationSchool',
          sortable: 'activation_school',
        },
        {
          label: '低活跃商家数量',
          prop: 'activationLow',
          sortable: 'activation_low',
        },
      ],
      col: [
        {
          label: '大区名称',
          prop: 'upOrgZone',
        },
        {
          label: '营销区域名称',
          prop: 'baseName',
        },
        {
          label: '店铺授权编码',
          prop: 'authCode',
        },
        {
          label: '店铺名称',
          prop: 'storeName',
        },
        {
          label: '活动名片下载次数',
          prop: 'activityCardDownloadCount',
          sortable: 'activity_card_download_count',
        },
        {
          label: '商品名片下载次数',
          prop: 'goodsCardDownloadCount',
          sortable: 'goods_card_download_count',
        },
        {
          label: '店铺名片下载次数',
          prop: 'storeCardDownloadCount',
          sortable: 'store_card_download_count',
        },
        {
          label: '总下载次数',
          prop: 'allCardDownloadCount',
          sortable: 'all_card_download_count',
        },
        {
          label: '活跃度',
          prop: 'activation',
        },
        {
          label: '第八代库存数量（瓶）',
          prop: 'stockCount',
          sortable: 'stock_count',
        },
        {
          label: '第八代 销售数量（瓶）',
          prop: 'sellCount',
          sortable: 'sell_count',
        },
        {
          label: '是否下载最新活动名片',
          prop: 'newestActivityDownload',
        },
        {
          label: '店铺人员信息是否完整',
          prop: 'isInfoComplete',
        },
        {
          label: '使用时长（分钟)',
          prop: 'useTime',
          sortable: 'use_time',
        },
        {
          label: '启动次数（次）',
          prop: 'startTimes',
          sortable: 'start_times',
        },
      ],
      dropCol: [
        {
          label: '大区名称',
          prop: 'upOrgZone',
        },
        {
          label: '营销区域名称',
          prop: 'baseName',
        },
        {
          label: '店铺授权编码',
          prop: 'authCode',
        },
        {
          label: '店铺名称',
          prop: 'storeName',
        },
        {
          label: '活动名片下载次数',
          prop: 'activityCardDownloadCount',
          sortable: 'activity_card_download_count',
        },
        {
          label: '商品名片下载次数',
          prop: 'goodsCardDownloadCount',
          sortable: 'goods_card_download_count',
        },
        {
          label: '店铺名片下载次数',
          prop: 'storeCardDownloadCount',
          sortable: 'store_card_download_count',
        },
        {
          label: '总下载次数',
          prop: 'allCardDownloadCount',
          sortable: 'all_card_download_count',
        },
        {
          label: '活跃度',
          prop: 'activation',
        },
        {
          label: '第八代库存数量（瓶）',
          prop: 'stockCount',
          sortable: 'stock_count',
        },
        {
          label: '第八代 销售数量（瓶）',
          prop: 'sellCount',
          sortable: 'sell_count',
        },
        {
          label: '是否下载最新活动名片',
          prop: 'newestActivityDownload',
        },
        {
          label: '店铺人员信息是否完整',
          prop: 'isInfoComplete',
        },
        {
          label: '使用时长（分钟)',
          prop: 'useTime',
          sortable: 'use_time',
        },
        {
          label: '启动次数（次）',
          prop: 'startTimes',
          sortable: 'start_times',
        },
      ],
      coltwo: [
        {
          label: '大区名称',
          prop: 'upOrgZone',
        },
        {
          label: '营销区域名称',
          prop: 'baseName',
        },
        {
          label: '活动名片下载次数',
          prop: 'activityCardDownloadCount',
          sortable: 'activity_card_download_count',
        },
        {
          label: '商品名片下载次数',
          prop: 'goodsCardDownloadCount',
          sortable: 'goods_card_download_count',
        },
        {
          label: '店铺名片下载次数',
          prop: 'storeCardDownloadCount',
          sortable: 'store_card_download_count',
        },
        {
          label: '总下载次数',
          prop: 'allCardDownloadCount',
          sortable: 'all_card_download_count',
        },
        {
          label: '高活跃商家数量',
          prop: 'activationHigh',
          sortable: 'activation_high',
        },
        {
          label: '中活跃商家数量',
          prop: 'activationSchool',
          sortable: 'activation_school',
        },
        {
          label: '低活跃商家数量',
          prop: 'activationLow',
          sortable: 'activation_low',
        },
      ],
      dropColtwo: [
        {
          label: '大区名称',
          prop: 'upOrgZone',
        },
        {
          label: '营销区域名称',
          prop: 'baseName',
        },
        {
          label: '活动名片下载次数',
          prop: 'activityCardDownloadCount',
          sortable: 'activity_card_download_count',
        },
        {
          label: '商品名片下载次数',
          prop: 'goodsCardDownloadCount',
          sortable: 'goods_card_download_count',
        },
        {
          label: '店铺名片下载次数',
          prop: 'storeCardDownloadCount',
          sortable: 'store_card_download_count',
        },
        {
          label: '总下载次数',
          prop: 'allCardDownloadCount',
          sortable: 'all_card_download_count',
        },
        {
          label: '高活跃商家数量',
          prop: 'activationHigh',
          sortable: 'activation_high',
        },
        {
          label: '中活跃商家数量',
          prop: 'activationSchool',
          sortable: 'activation_school',
        },
        {
          label: '低活跃商家数量',
          prop: 'activationLow',
          sortable: 'activation_low',
        },
      ],
      isActive: false,
      items: ['大区查看', '营销区域查看', '店铺查看'],
      paiming: true,
      paimingone: false,
      paimingtwo: false,

      loading: true,
      options: [],
      checkedarr: [],

      dataorg: [],
      defaultProps: {
        children: 'children',
        label: '+',
        isLeaf: false,
      },
      listQuery: {
        current: 1,
        size: 100,
      },
      listQueryone: {
        current: 1,
        size: 100,
      },
      listQuerytwo: {
        current: 1,
        size: 100,
      },
      memberList: {},
      detailform: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      },
      dialogVisibledetail: false,
      total: 0,
      formInline: {
        sort: 1,
        orderNo: '',
        activation: '',
        returnStatus: '',
        customizeStatus: '',
        startUseTime: '',
        endUseTime: '',
        startStockCount: '',
        endStartTimes: '',
        startStartTimes: '',
        startSellCount: '',
        startActivityCardDownloadCount: '',
        endActivityCardDownloadCount: '',
        endStockCount: '',
        endSellCount: '',
        endUseTime: '',
        dateRange: [curDateStr(), curDateStr()],
        shopId: '',
        storeName: '',
        shopOwnerName: '',
        warzoneId: '',
        upOrgZone: '',
        baseId: '',
        baseName: '',
        gradelevelId: '',
        memberName: '',
        memberPhone: '',
        goodsName: '',
        payMethod: '',
        authCode: '',
        isInfoComplete: '',
        newestActivityDownload: '',
        isGiftOrder: '',
        isFeastOrder: '',
        goodsStyle: '',
        ascs: [],
        descs: [],
      },
      totalData: {
        total: 0,
        strongBindMemberSum: 0,
        weakMemberSum: 0,
      },
      data5: [],
      data3: [],
      data4: [],
      resone: [],
      objone: {},
      tableData: [],
      multipleSelection: [],
      radio: '',
      rolefenid: '',
      selected: {},
      form: {
        memberName: '',
        sex: '',
        memberType: '',
        membercardId: '',
        cellPhoneNo: '',
      },
      type: '1',
      orgList: {},
      roleid: '',
      dialogVisibleone: false,
      dialogVisibletwo: false,
      dialogVisible: false,
      ruledata: [],
      orderStatusList: [
        {
          id: '1',
          name: '低',
        },
        {
          id: '2',
          name: '中',
        },
        {
          id: '3',
          name: '高',
        },
      ],
    };
  },
  mounted() {
    this.checkedarr = [];
    this.logininfo = localStorage.getItem('logininfo');

    this.orgList = JSON.parse(this.logininfo).orgList;
    this.formInline.orgName = this.orgList[0].orgName;
    console.log(this.orgList, '000333');
    this.resone = this.orgList[0].orgSeq;
    this.checkedarr.push(this.resone);
    console.log(this.resone, '000388');
    this._memberManage();
    this._getGraCount();
    this._getmemberinfo();
    this.queryUserMenuFieldByParam(); //加载列表配置字段
    // this.isActive=0
    document.body.ondrop = function(event) {
      event.preventDefault();
      event.stopPropagation();
    };
    this.columnDropone();
  },

  methods: {
    columnDrop() {
      console.log(document);
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr');
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: (evt) => {
          const oldItem = this.dropCol[evt.oldIndex - 1];
          this.dropCol.splice(evt.oldIndex - 1, 1);
          this.dropCol.splice(evt.newIndex - 1, 0, oldItem);
        },
      });
    },
    columnDropone() {
      const wrapperTrone = document.querySelector(
        '.el-table__header-wrapper tr'
      );
      this.sortable = Sortable.create(wrapperTrone, {
        animation: 180,
        delay: 0,
        onEnd: (evt) => {
          const oldItem = this.dropColone[evt.oldIndex];
          this.dropColone.splice(evt.oldIndex, 1);
          this.dropColone.splice(evt.newIndex, 0, oldItem);
        },
      });
    },
    columnDroptwo() {
      const wrapperTrtwo = document.querySelector(
        '.el-table__header-wrapper tr'
      );
      this.sortable = Sortable.create(wrapperTrtwo, {
        animation: 180,
        delay: 0,
        onEnd: (evt) => {
          const oldItem = this.dropColtwo[evt.oldIndex];
          this.dropColtwo.splice(evt.oldIndex, 1);
          this.dropColtwo.splice(evt.newIndex, 0, oldItem);
        },
      });
    },

    exportExcel() {
      let data = {
        upOrgZone: this.formInline.upOrgZone,
        type: this.type,
        orgSeq: this.orgList[0].orgSeq,
      };
      excelTradeOrderByParamone(data)
        .then((res) => {
          const link = document.createElement('a');
          let blob = new Blob([res], { type: 'application/vnd.ms-excel' });
          link.style.display = 'none';
          //设置连接
          link.href = URL.createObjectURL(blob);
          link.download = '商家端活跃度统计表（大区）.xlsx';
          document.body.appendChild(link);
          //模拟点击事件
          link.click();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    exportExcelone() {
      let data = {
        upOrgZone: this.formInline.upOrgZone,
        baseName: this.formInline.baseName,
        type: this.type,
        orgSeq: this.orgList[0].orgSeq,
      };
      excelTradeOrderByParamone(data)
        .then((res) => {
          const link = document.createElement('a');
          let blob = new Blob([res], { type: 'application/vnd.ms-excel' });
          link.style.display = 'none';
          //设置连接
          link.href = URL.createObjectURL(blob);
          link.download = '商家端活跃度统计表（营销区域）.xlsx';
          document.body.appendChild(link);
          //模拟点击事件
          link.click();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    exportExceltwo() {
      let data = {
        type: this.type,
        startStockCount: this.formInline.startStockCount,
        endStockCount: this.formInline.endStockCount,
        startStartTimes: this.formInline.startStartTimes,
        endStartTimes: this.formInline.endStartTimes,
        startSellCount: this.formInline.startSellCount,
        endSellCount: this.formInline.endSellCount,
        startActivityCardDownloadCount: this.formInline
          .startActivityCardDownloadCount,
        endActivityCardDownloadCount: this.formInline
          .endActivityCardDownloadCount,
        storeName: this.formInline.storeName.trim(),
        upOrgZone: this.formInline.upOrgZone.trim(),
        baseName: this.formInline.baseName.trim(),
        authCode: this.formInline.authCode.trim(),
        activation: this.formInline.activation,
        newestActivityDownload: this.formInline.newestActivityDownload,
        isInfoComplete: this.formInline.isInfoComplete,
        type: this.type,
        orgSeq: this.orgList[0].orgSeq,
      };
      excelTradeOrderByParamone(data)
        .then((res) => {
          const link = document.createElement('a');
          let blob = new Blob([res], { type: 'application/vnd.ms-excel' });
          link.style.display = 'none';
          //设置连接
          link.href = URL.createObjectURL(blob);
          link.download = '商家端活跃度统计表（店铺）.xlsx';
          document.body.appendChild(link);
          //模拟点击事件
          link.click();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    kong() {
      this.formInline.upOrgZone = '';
      this.formInline.sort = 1;
    },
    kongone() {
      this.formInline.upOrgZone = '';
      this.formInline.baseName = '';
      this.formInline.sort = 1;
    },
    kongtwo() {
      this.formInline.sort = 1;
      this.formInline.authCode = '';
      this.formInline.storeName = '';
      this.formInline.upOrgZone = '';
      this.formInline.baseName = '';
      this.formInline.activation = '';
      this.formInline.isInfoComplete = '';
      this.formInline.newestActivityDownload = '';
      this.formInline.startStockCount = '';
      this.formInline.endStockCount = '';
      this.formInline.startSellCount = '';
      this.formInline.endSellCount = '';
      this.formInline.startActivityCardDownloadCount = '';
      this.formInline.endActivityCardDownloadCount = '';
    },
    handleNodeClickone(data, checked, node) {
      this.formInline.orgName = data.orgName;
    },
    handleNodeClick(data, checked, node) {
      console.log(data, checked, node, '111');
      if (checked === true) {
        this.checkedId = data.orgSeq;
        this.$refs.tree.setCheckedKeys([data.orgSeq]);
      } else {
        if (this.checkedId == data.orgSeq) {
          this.$refs.tree.setCheckedKeys([data.orgSeq]);
        }
      }
      this.resone = this.$refs.tree.getCheckedKeys();
    },
    // },
    surefenrole() {
      this._memberManage();
      this.resone = this.resone[0];
      this._getGraCount();
      console.log(this.resone, 'io88');
      this.dialogVisible = !this.dialogVisible;
    },
    search() {
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        ascs: [],
        descs: [],
        condition: {
          type: this.type,
          upOrgZone: this.formInline.upOrgZone.trim(),
          sort: this.formInline.sort,
          orgSeq: this.orgList[0].orgSeq,
        },
        ascs: this.formInline.ascs,
        descs: this.formInline.descs,
      };
      queryTradeOrderByParamone(data).then((res) => {
        this.tableData = res.records;
        this.total = res.total;
      });
    },
    searchone() {
      let data = {
        size: this.listQueryone.size,
        current: this.listQueryone.current,
        ascs: [],
        descs: [],
        condition: {
          type: this.type,
          upOrgZone: this.formInline.upOrgZone.trim(),
          baseName: this.formInline.baseName.trim(),
          sort: this.formInline.sort,
          orgSeq: this.orgList[0].orgSeq,
        },
        ascs: this.formInline.ascs,
        descs: this.formInline.descs,
      };
      queryTradeOrderByParamone(data).then((res) => {
        this.tableData = res.records;
        this.total = res.total;
      });
    },
    searchtwo() {
      let data = {
        size: this.listQuerytwo.size,
        current: this.listQuerytwo.current,
        ascs: [],
        descs: [],
        condition: {
          type: this.type,
          startStockCount: this.formInline.startStockCount,
          endStockCount: this.formInline.endStockCount,
          startStartTimes: this.formInline.startStartTimes,
          endStartTimes: this.formInline.endStartTimes,
          startSellCount: this.formInline.startSellCount,
          endSellCount: this.formInline.endSellCount,
          startActivityCardDownloadCount: this.formInline
            .startActivityCardDownloadCount,
          endActivityCardDownloadCount: this.formInline
            .endActivityCardDownloadCount,
          storeName: this.formInline.storeName.trim(),
          upOrgZone: this.formInline.upOrgZone.trim(),
          baseName: this.formInline.baseName.trim(),
          authCode: this.formInline.authCode.trim(),
          activation: this.formInline.activation,
          isInfoComplete: this.formInline.isInfoComplete,
          newestActivityDownload: this.formInline.newestActivityDownload,
          orgSeq: this.orgList[0].orgSeq,
        },
        ascs: this.formInline.ascs,
        descs: this.formInline.descs,
      };
      queryTradeOrderByParamone(data).then((res) => {
        this.tableData = res.records;
        this.total = res.total;
      });
    },

    handledelete(v) {
      let data = {
        memberId: v.memberId,
      };
      this.$confirm('确认删除吗？').then((_) => {
        delmemberinfo(qs.stringify(data)).then((res) => {
          this.$message({
            showClose: true,
            message: '删除成功',
            type: 'success',
          });
          this._memberManage();
        });
      });
    },
    add() {
      this.logininfo = localStorage.getItem('logininfo');
      //   console.log(this.logininfo.userId, "000");
      this.orgList = JSON.parse(this.logininfo).orgList;

      console.log(this.orgList, '000');
      //   console.log(this.logininfo.userId, "000");
      //   this.logininfo.orgList.forEach((item, i) => {
      //     this.dataorg.push(item);
      //   });
      //   console.log(this.dataorg, "000");

      this.dialogVisible = !this.dialogVisible;
      this._queryStoreOrgseq();
    },
    mouseEnter(index) {
      this.formInline.sort = 1;
      this.isActive = index;
      if (index == 0) {
        this.type = '1';

        (this.paiming = true),
          (this.paimingone = false),
          (this.paimingtwo = false),
          this._memberManage();
      } else if (index == 1) {
        this.type = '2';

        (this.paiming = false),
          (this.paimingone = true),
          (this.paimingtwo = false),
          this._memberManageone();
      } else if (index == 2) {
        this.type = '3';

        (this.paiming = false),
          (this.paimingone = false),
          (this.paimingtwo = true),
          this._memberManagetwo();
      }
    },
    _memberManage() {
      if (
        this.formInline.dateRange == null ||
        this.formInline.dateRange.length == 0
      ) {
        this.formInline.dateRange = ['', ''];
      }
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        ascs: [],
        descs: [],
        condition: {
          type: this.type,
          upOrgZone: this.formInline.upOrgZone.trim(),
          sort: this.formInline.sort,
          orgSeq: this.orgList[0].orgSeq,
        },
        ascs: this.formInline.ascs,
        descs: this.formInline.descs,
      };
      queryTradeOrderByParamone(data).then((res) => {
        this.loading = false;
        this.tableData = res.records;
        this.total = res.total;
      });
    },
    _memberManageone() {
      if (
        this.formInline.dateRange == null ||
        this.formInline.dateRange.length == 0
      ) {
        this.formInline.dateRange = ['', ''];
      }
      let data = {
        size: this.listQueryone.size,
        current: this.listQueryone.current,
        ascs: [],
        descs: [],
        condition: {
          type: this.type,
          upOrgZone: this.formInline.upOrgZone.trim(),
          baseName: this.formInline.baseName.trim(),
          sort: this.formInline.sort,
          orgSeq: this.orgList[0].orgSeq,
        },
        ascs: this.formInline.ascs,
        descs: this.formInline.descs,
      };
      queryTradeOrderByParamone(data).then((res) => {
        this.loading = false;
        this.tableData = res.records;
        this.total = res.total;
      });
    },
    _memberManagetwo() {
      if (
        this.formInline.dateRange == null ||
        this.formInline.dateRange.length == 0
      ) {
        this.formInline.dateRange = ['', ''];
      }
      let data = {
        size: this.listQuerytwo.size,
        current: this.listQuerytwo.current,
        ascs: [],
        descs: [],
        condition: {
          sort: this.formInline.sort,
          type: this.type,
          startStockCount: this.formInline.startStockCount,
          endStockCount: this.formInline.endStockCount,
          startStartTimes: this.formInline.startStartTimes,
          endStartTimes: this.formInline.endStartTimes,
          startSellCount: this.formInline.startSellCount,
          endSellCount: this.formInline.endSellCount,
          startActivityCardDownloadCount: this.formInline
            .startActivityCardDownloadCount,
          endActivityCardDownloadCount: this.formInline
            .endActivityCardDownloadCount,
          storeName: this.formInline.storeName.trim(),
          upOrgZone: this.formInline.upOrgZone.trim(),
          baseName: this.formInline.baseName.trim(),
          authCode: this.formInline.authCode.trim(),
          activation: this.formInline.activation,
          activation: this.formInline.activation,
          newestActivityDownload: this.formInline.newestActivityDownload,
          orgSeq: this.orgList[0].orgSeq,
        },
        ascs: this.formInline.ascs,
        descs: this.formInline.descs,
      };
      queryTradeOrderByParamone(data).then((res) => {
        this.loading = false;
        this.tableData = res.records;
        this.total = res.total;
      });
    },
    _queryStoreOrgseq() {
      let data = {
        orgSeq: this.orgList[0].orgSeq,
      };
      queryStoreOrgseq(data).then((res) => {
        this.dataorg = res.records;
        console.log(data);
      });
    },
    _getGraCount() {
      console.log(this.resone, 'io555');
      let data = {
        orgSeq: this.resone,
      };
      getGraCount(data).then((res) => {
        console.log(data);
        this.totalData = res.result;
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.listQuery.size = val;
      this._memberManage();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.listQuery.current = val;
      this._memberManage();
    },
    handleSizeChangeone(val) {
      console.log(`每页 ${val} 条`);
      this.listQueryone.size = val;
      this._memberManageone();
    },
    handleCurrentChangeone(val) {
      console.log(`当前页: ${val}`);
      this.listQueryone.current = val;
      this._memberManageone();
    },
    handleSizeChangetwo(val) {
      console.log(`每页 ${val} 条`);
      this.listQuerytwo.size = val;
      this._memberManagetwo();
    },
    handleCurrentChangetwo(val) {
      console.log(`当前页: ${val}`);
      this.listQuerytwo.current = val;
      this._memberManagetwo();
    },
    indexMethod(index) {
      let curpage = this.listQuery.current; //单前页码，具体看组件取值
      let limitpage = this.listQuery.size; //每页条数，具体是组件取值
      return index + 1 + (curpage - 1) * limitpage;
    },
    _getmemberinfo() {
      let data = {
        size: 99,
        current: 1,
        condition: {},
        ascs: [],
        descs: [],
      };
      getmemberrule(data).then((res) => {
        this.options = res.records;
      });
    },

    //显示配置弹窗
    showConfigTableDialog() {
      this.userMenuShowFields = this.userOldMenuShowFields;
      let checkedCount = this.userMenuShowFields.length;
      this.formInline2.isAll = checkedCount === this.userMenuAllFields.length;
      this.formInline2.isIndeterminate =
        checkedCount > 0 && checkedCount < this.userMenuAllFields.length;
      this.configTableDialogVisible = true;
    },
    //关闭配置弹窗
    closeConfigTableDialog() {
      this.configTableDialogVisible = false;
      let data = {
        menuCode: this.formInline2.menuCode,
      };
    },
    queryUserMenuFieldByParam() {
      let data = {
        menuCode: this.formInline2.menuCode,
      };
      this.userMenuAllFields = []; //全部的列名
      this.userMenuShowFields = []; //显示的列名
      queryUserMenuFieldByParam(data).then((res) => {
        this.userMenuFieldList = res.records;
        this.userMenuFieldList.forEach((item, index) => {
          this.userMenuAllFields.push(item.fieldCode);
          if (item.isShow == 1) {
            this.userMenuShowFields.push(item.fieldCode);
          }
        });
        if (
          this.userMenuShowFields.length == 0 ||
          this.userMenuShowFields.length == this.userMenuAllFields.length
        ) {
          this.userMenuShowFields = this.userMenuAllFields;
          this.formInline2.isAll = true;
        } else {
          this.formInline2.isAll = false;
          this.formInline2.isIndeterminate = true;
        }
        this.insertUserFieldRelation(1);
      });
    },
    getNewCol() {
      let data = {
        menuCode: this.formInline2.menuCode,
      };
      this.col = [];
      this.dropCol = [];
      queryUserMenuFieldByParam(data).then((res) => {
        this.userMenuFieldList = res.records;
        this.userMenuFieldList.forEach((item, index) => {
          if (item.isShow == 1) {
            this.col.push({ label: item.fieldName, prop: item.fieldCode });
            this.dropCol.push({ label: item.fieldName, prop: item.fieldCode });
          }
        });
        if (this.col.length == 0) {
          this.col = this.allCol;
          this.dropCol = this.allCol;
          this.formInline2.isAll = true;
        }
        this.col.forEach((item, index) => {
          if (item.prop == 'activityCardDownloadCount') {
            this.$set(item, 'sortable', 'activity_card_download_count');
          } else if (item.prop == 'goodsCardDownloadCount') {
            this.$set(item, 'sortable', 'goods_card_download_count');
          } else if (item.prop == 'storeCardDownloadCount') {
            this.$set(item, 'sortable', 'store_card_download_count');
          } else if (item.prop == 'allCardDownloadCount') {
            this.$set(item, 'sortable', 'all_card_download_count');
          } else if (item.prop == 'stockCount') {
            this.$set(item, 'sortable', 'stock_count');
          } else if (item.prop == 'sellCount') {
            this.$set(item, 'sortable', 'sell_count');
          } else if (item.prop == 'useTime') {
            this.$set(item, 'sortable', 'use_time');
          } else if (item.prop == 'startTimes') {
            this.$set(item, 'sortable', 'start_times');
          }
        });
      });
    },
    //保存显示字段
    insertUserFieldRelation(isInit) {
      // if(this.userMenuShowFields == null || this.userMenuShowFields.length == 0){
      //   this.$message({showClose: true, message: "列表字段不可为空",type: "info"});
      //   return;
      // }
      let data = {
        menuCode: this.formInline2.menuCode,
        fieldList: this.userMenuShowFields,
      };
      if (isInit == 1) {
        insertUserFieldRelation(data).then((res) => {
          if (res.code == 1) {
            this.userOldMenuShowFields = this.userMenuShowFields;
            this.closeConfigTableDialog();
            this.getNewCol();
          }
        });
        return;
      }
      this.insertLoading = true;
      insertUserFieldRelation(data).then((res) => {
        this.insertLoading = false;
        if (res.code == 1) {
          this.$message({
            showClose: true,
            message: res.message,
            type: 'success',
          });
          this.userOldMenuShowFields = this.userMenuShowFields;
          this.closeConfigTableDialog();
          this.getNewCol();
        } else {
          this.$message({
            showClose: true,
            message: res.message,
            type: 'error',
          });
        }
      });
    },
    //是否全选字段
    isAllFieldChange(val) {
      this.userMenuShowFields = val ? this.userMenuAllFields : [];
      this.formInline2.isIndeterminate = false;
    },
    //是否选中单个字段
    isSingleFieldChange(val) {
      let checkedCount = this.userMenuShowFields.length;
      this.formInline2.isAll = checkedCount === this.userMenuAllFields.length;
      this.formInline2.isIndeterminate =
        checkedCount > 0 && checkedCount < this.userMenuAllFields.length;
    },
    //获取字段勾选状态
    getUserMenuFieldStatus(fieldCode) {
      if (this.userMenuShowFields != null) {
        for (let i = 0; i < this.userMenuShowFields.length; i++) {
          if (this.userMenuShowFields[i] == fieldCode) {
            return true;
          }
        }
        return false;
      }
    },
    //是否显示字段
    isShow(fieldCode) {
      if (this.formInline2.isAll || this.getUserMenuFieldStatus(fieldCode)) {
        return true;
      } else {
        return false;
      }
    },

    handleSort(val) {
      let sortModel = '';
      if (val.order === 'ascending') {
        sortModel = 'ASC';
        this.formInline.ascs = [val.column.sortable];
        this.formInline.descs = [];
        if (this.type == 1) {
          this.search();
        } else if (this.type == 2) {
          this.searchone();
        } else {
          this.searchtwo();
        }
      } else if (val.order === 'descending') {
        sortModel = 'DESC';
        this.formInline.ascs = [];
        this.formInline.descs = [val.column.sortable];
        if (this.type == 1) {
          this.search();
        } else if (this.type == 2) {
          this.searchone();
        } else {
          this.searchtwo();
        }
      }
    },
  },
};
</script>
<style lang="less" scoped>
.toptitle {
  border: 1px solid #e0e0e0;
  border-bottom: 2px solid #188097;
  background: #f5f5f5;
  line-height: 35px;
  margin-bottom: 10px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: bold;
}
.limttable {
  width: 500px;
  float: left;
}

.limttree {
  display: inline-block;

  border-top: 48px solid rgb(238, 241, 246);
  width: 206px;
  margin-left: 150px;
}
.demo-form-inline {
  //   border: 1px solid #ebeef5;
  padding: 20px 10px 3px 30px;
  margin-bottom: 25px;
}
.toptitle {
  border: 1px solid #e0e0e0;
  border-bottom: 2px solid #188097;
  background: #f5f5f5;
  line-height: 35px;
  margin-bottom: 10px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: bold;
}
.limttreecontain {
  height: 260px;
  width: 200px;
  overflow: scroll;
  border: 1px solid #ccc;
}
.order_content {
  width: 350px;
  height: 120px;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
// .order_content .order_total_title {
//   color: #000;
// }
.order_content .order_total_info {
  margin: 10px 0;
}
.order_content .order_data {
  font-size: 1.4em;
  font-weight: bold;
}
.order_content .compared_title {
  font-size: 0.8em;
  color: #999;
}
.demo-form-inline .el-form-item {
  margin-bottom: 0px;
}
.el-row {
  margin-bottom: 0px !important;
}
.active .order_total_title {
  background: #409eff;
  color: #fff !important; // 选中字体背景跟着改变
}
</style>
